<template>
	<view class="SelectedPremiumProducts bigestBox">
		<!-- 搜索框 -->
		<uni-search-bar placeholder="搜索商品" bgColor="#EEEEEE" @confirm="search" v-model="searchValue">
			<template v-slot:searchIcon>
				<uni-icons color="#999999" size="18" type="search" @click="search" />
			</template>
		</uni-search-bar>
		<!-- 图片 -->
		<image src="/static/images/SelectedPremiumProductsPage/PillowReplace.png" mode="" class="pillow">
			<view class="imgContent flexDeCo">
				<view class="ic1">低软睡感 深陷美梦</view>
				<view class="ic2">希尔顿酒店鹅绒枕芯</view>
				<view class="ic3 flex">
					<view class="ic3_left">购2件 单件到手价</view>
					<view class="ic3_right">
						<text class="ic3r_left">¥550</text>
						<text class="ic3r_right">起</text>
					</view>
				</view>
				<view class="ic4">日常价￥1299起</view>
				<view class="ic5" @click="showPurchasePopFn">立即选购</view>
			</view>
		</image>
		<!-- 热门搜索 -->
		<view class="HotSearch">
			<view class="hs_title">热门搜索</view>
			<view class="hsData">
				<template v-for="(item,index) in HotSearchData">
					<view class="hs_Item" @click="goToProductListPage(item.categoryId)">{{item.content}}</view>
				</template>
			</view>
		</view>
		<selected-premium-products-data></selected-premium-products-data>
		<!-- 购买的底部弹窗 -->
		<template v-if="showPurchasePop">
			<pucharse-pop @closePucharsePop='shutupPurchase'></pucharse-pop>
		</template>
		<!-- <view class="shop-car" @tap="navigateTo('/pages/ShoppingCartPage/ShoppingCartPage')">
			<text class="hilton hilton-gouwuche"></text>
		</view> -->
		<shop-car />
	</view>
</template>

<script>
	import SelectedPremiumProductsData from '../../components/SelectedPremiumProducts/SelectedPremiumProductsData.vue';
	import pucharsePop from '../../components/common/pucharsePop/pucharsePop.vue';
	import { navigateTo } from "@/utils/promise.js"
	import ShopCar from '../../components/ShopCar/ShopCar.vue';
	import { request } from '@/utils/request';

	export default {
		data() {
			return {
				HotSearchData: [],
				searchValue: "",
				showPurchasePop: false,
				selectedItem: "",
				productionList: []
			};
		},
		onShow() {
			this.getProductionClass()
			this.getProductionPage()
		},
		onLoad(options) {

		},
		methods: {
			search() {
				console.log(this.searchValue);
				uni.navigateTo({
					url: "/pages/ProductListPage/ProductListPage"
				})
			},
			showPurchasePopFn() {
				this.showPurchasePop = true;
				uni.hideTabBar()
			},
			shutupPurchase() {
				// console.log("shutup")
				this.showPurchasePop = false;
				// console.log("shutUpP")
				uni.showTabBar()
			},

			goToProductListPage(categoryId) {
				// this.selectedItem = item;
				uni.navigateTo({
					url: "/pages/ProductListPage/ProductListPage?categoryId=" + categoryId
				})
			},
			navigateTo,
			getProductionClass() {
				// request(
				// 	"/hilton/products/product-category/get-by-category-id",
				// 	{
				// 	},
				// 	{
				// 		method: "GET"
				// 	}
				// ).then((res) => {
				// 	console.log(res)
				// }).catch((err) => {
				// 	console.log(err)
				// })
				this.HotSearchData = [
					{
						categoryId: 1,
						content: "暖床冬品"
					},
					{
						categoryId: 2,
						content: "热门推荐"
					},
					{
						categoryId: 3,
						content: "精选礼品"
					},
					{
						categoryId: 4,
						content: "好眠必备枕芯"
					},
					{
						categoryId: 5,
						content: "明星香氛"
					},
					{
						categoryId: 6,
						content: "甄选洗护"
					},
				]
			},
			getProductionPage() {
				request(
					"/hilton/products/page",
					{},
					{
						method: "GET",
					}
				).then((res) => {
					// console.log(res)
				}).catch((err) => {
					console.log(err)
				})
			}
		},
		components: {
			SelectedPremiumProductsData,
			pucharsePop,
			ShopCar,
		},
	}
</script>

<style lang="less" scoped>
	@import "../../static/commonStyleLess/grayBox.less";

	.SelectedPremiumProducts {
		padding-top: 6rpx;
		//公共样式
		font-family: 'PingFang SC';
		letter-spacing: -0.82rpx;
		color: #1D1D1D;

		// 修改搜索框样式
		::v-deep .uni-searchbar {
			margin-top: 26rpx !important;
		}

		::v-deep .uni-section-header {
			display: none !important;
		}

		::v-deep .uni-searchbar__cancel {
			display: none;
		}

		::v-deep .uni-searchbar__box {
			width: 686rpx;
			height: 72rpx;
			gap: 28rpx;

		}

		::v-deep .uni-searchbar {
			// padding: 0 !important;
			padding-top: 0 !important;
			padding-bottom: 20rpx !important;
			// background-color: rgb(247, 247, 247);

		}

		::v-deep .uni-section-content {
			border: 2rpx solid rgb(247, 247, 247);
			margin: 26rpx auto 0 auto;
		}

		::v-deep .uni-searchbar {
			padding-bottom: 0 !important;
		}

		.pillow {
			width: 750rpx;
			height: 750rpx;
			margin: 26rpx auto 0 auto;
			position: relative;

			.imgContent {
				position: absolute;
				top: 60rpx;
				left: 60rpx;

				.ic1 {
					font-weight: 600;
					font-size: 44rpx;
				}

				.ic2,
				.ic3,
				.ic4,
				.ic5 {

					font-weight: 400;
					font-size: 28rpx;

				}

				.ic2 {
					margin-top: 20rpx;
				}

				.ic3 {
					margin-top: 6rpx;
					align-items: center;

					.ic3_right {
						color: #FF4D00;

						.ic3r_left {
							font-weight: 600;
							font-size: 40rpx;
							letter-spacing: 0rpx;
						}

						.ic3r_right {
							font-weight: 600;
							font-size: 28rpx;
							letter-spacing: 0px;

						}
					}
				}

				.ic4 {
					margin-top: 6rpx;
					font-weight: 400;
					font-size: 26rpx;
					text-decoration: line-through;
				}

				.ic5 {
					font-weight: 400;
					font-size: 26rpx;
					letter-spacing: 0px;
					width: 160rpx;
					height: 56rpx;
					border-radius: 8rpx;
					border-width: 2rpx;
					background: #FFFFFF;
					border: 1px solid #1D1D1D;
					color: #222222;
					margin-top: 40rpx;
					text-align: center;
					line-height: 56rpx;

				}
			}

		}

		.HotSearch {
			margin-top: 40rpx;
			font-weight: 500;
			font-size: 36rpx;

			.hsData {
				display: flex;
				flex-wrap: wrap;
				align-items: center;

				.hs_Item {
					width: 210rpx;
					height: 80rpx;
					border-radius: 40rpx;
					font-weight: 400;
					font-size: 26rpx;
					letter-spacing: 0px;
					background: #FFFFFF;
					color: #222222;
					margin-left: 30rpx;
					text-align: center;
					line-height: 80rpx;
					margin-top: 20rpx;

				}
			}

			.hs_title {
				margin-left: 30rpx;
			}
		}
	}
</style>